<script setup lang="ts">
import { getSummaryData, getLendData, getstatisticsData } from '@/api/home/index'
import LineChart from '@/components/echarts/LineChart.vue'
import BarGraphChart from '@/components/echarts/BarGraphChart.vue'
import PieChart from '@/components/echarts/PieChart.vue'

const state = reactive({
  lendLoading: false,
  buyLoading: false,
  statisticsLoading: false,
  summaryData: {
    totalMaterialsNum: 0,
    totalMaterialsMoney: 0,
    totalStoreMaterials: 0,
    totalLendMaterials: 0,
    totalScrapMaterials: 0
  } as any,
  // 折线图
  lineTitle: '近30天物料借出数量',
  lineData: {
    xAxisData: [] as string[],
    data: [] as any[]
  },
  // 累计图
  barGraphTitle: '近30天物料购买数量',
  barGraphData: {
    xAxisData: [] as string[],
    data: [] as any[]
  },
  // 饼形
  pieTitle: '库房物料统计',
  pieSubtitle: '库房现存物料的数量',
  pieData: {
    data: [] as any[]
  },
});

const { lendLoading, buyLoading, statisticsLoading, summaryData, lineTitle, lineData, barGraphTitle, barGraphData, pieTitle, pieData } = { ...toRefs(state) }

onMounted(() => {
  loadSummaryData()
  loadLendData()
  loadBuyData()
  loadStatisticsData()
});

// 获取物料借出的数据
async function loadSummaryData() {
  try {
    state.lendLoading = true;
    const { data } = await getSummaryData()
    // console.log('data', data.results);
    state.summaryData.totalMaterialsNum = data.results.totalMaterialsNum
    state.summaryData.totalMaterialsMoney = data.results.totalMaterialsMoney
    state.summaryData.totalStoreMaterials = data.results.totalStoreMaterials
    state.summaryData.totalLendMaterials = data.results.totalLendMaterials
    state.summaryData.totalScrapMaterials = data.results.totalScrapMaterials
  } catch (error) {
  } finally {
    state.lendLoading = false;
  }
}

// 获取物料借出的数据
async function loadLendData() {
  try {
    state.lendLoading = true;
    const { data } = await getLendData()
    // console.log('data', data);
    state.lineData.xAxisData = data.results.xData
    state.lineData.data = [
      { typeName: '光纤线', list: data.results.opticalCableList },
      { typeName: '光模块', list: data.results.opticalModuleList },
      { typeName: '示波器', list: data.results.oscilloscopeList }
    ];
  } catch (error) {
  } finally {
    state.lendLoading = false;
  }
}

// 获取购买物料的数据
async function loadBuyData() {
  try {
    state.buyLoading = true;
    const { data } = await getLendData()
    // console.log('data', data);
    state.barGraphData.xAxisData = data.results.xData
    state.barGraphData.data = [
      { typeName: '光纤线', list: data.results.opticalCableList },
      { typeName: '光模块', list: data.results.opticalModuleList },
      { typeName: '示波器', list: data.results.oscilloscopeList }
    ];
  } catch (error) {
  } finally {
    state.buyLoading = false;
  }
}

// 获取物料统计
async function loadStatisticsData() {
  try {
    state.statisticsLoading = true;
    const { data } = await getstatisticsData()
    // console.log('获取物料统计', data)
    state.pieData.data = data.results
  } catch (error) {
  } finally {
    state.statisticsLoading = false;
  }
}

// 数据块 莫兰迪色系
const blockList = [
  { column: 'totalMaterialsNum', name: '物料总数量', unit: '件', content: '物料总数量=(借出物料总数+现存物料总数)的订单数', color: '#ADB0B7' },
  { column: 'totalMaterialsMoney', name: '物料总价', unit: '元', content: '物料总价=现存物料总数的价格+借出物料总数的价格', color: '#CEBFBC' },
  { column: 'totalStoreMaterials', name: '现存物料总数', unit: '件', content: '现存物料总数是指公司库房中未借出的物件', color: '#D4C3B3' },
  { column: 'totalLendMaterials', name: '借出物料总数', unit: '件', content: '借出物料总数=物料总数量-现存物料总数', color: '#CED1CA' },
  { column: 'totalScrapMaterials', name: '报废物料总数', unit: '件', content: '报废物料总数是指公司已处理的物件', color: '#97A479' },
]
</script>

<template>
  <div class="wfull hfull">
    <div class="border-3 border-l-solid border-l-#316c72 font-500 text-18px pl-10px">物料统计</div>
    <div class="wfull flex mt3 justify-between items-center">
      <el-card class="wfull flex mr-10px rounded-8px flex-wrap cursor-pointer hover:animate-pulse"
        :style="{ 'background-color': `${item.color}` }" v-for="item in blockList">
        <div class="flex items-center">
          <span class="text-14px">{{ item.name }}</span>
          <el-tooltip :content="item.content" placement="top">
            <SvgIcon class="text-#fff ml-2" name="question"></SvgIcon>
          </el-tooltip>
        </div>
        <div class="mt10px">
          <span class="text-30px">{{ summaryData[item.column] }}</span>
          <span class="unit">{{ item.unit }}</span>
        </div>
      </el-card>
    </div>
    <div>
      <LineChart class="mt-3" v-loading="lendLoading" :title="lineTitle" height="360px" unit="件"
        :xAxisData="lineData.xAxisData" :data="lineData.data" />
      <div class="w-full flex justify-between">
        <BarGraphChart class="w-49% mt-3" v-loading="buyLoading" :title="barGraphTitle" height="360px" unit="件"
          :xAxisData="barGraphData.xAxisData" :data="barGraphData.data" />
        <PieChart class="w-49% mt-3" v-loading="statisticsLoading" :title="pieTitle" height="360px" unit="件"
          :data="pieData.data" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>